<template>
    <div style="margin-top:10px;">
        <a-spin :loading="loading" style="width:100%;">
        <div class="psrw_top">
            <div class="psrw_top_item">
                <div class="psrw_top_item_icon">
                      <!-- <icon-user size="35" style="color:#1F6CEB;"/> -->
                      <a-image width="50" :src="dpsImg"/>
                  </div>
                <div class="psrw_top_item_right">
                    <div style="font-weight:bold; color:#000;">待配送</div>
                    <div>
                        <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{dps}}</span>
                        <span>吨</span>
                    </div>
                </div>
            </div>
            <div class="psrw_top_item">
                <div class="psrw_top_item_icon">
                      <!-- <icon-user size="35" style="color:#1F6CEB;"/> -->
                      <a-image width="50" :src="pszImg"/>
                  </div>
                <div class="psrw_top_item_right">
                    <div style="font-weight:bold; color:#000;">配送中</div>
                    <div>
                        <span style="color:#68C1B2;font-size:18px; font-weight:bold;">{{psz}}</span>
                        <span>吨</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="psrw_content">
            <div class="psrw_content_title">
                <div style="width:250px;">公司名称</div>
                <div  style="flex:1; margin:0 20px;">进度百分比</div>
                <div style="width:180px;">剩余重量/总重量</div>
            </div>
           
            <a-scrollbar style="height:410px;overflow: auto;">
            <div class="psrw_content_item" v-for="(item,i) in data" :key="i">
                <div style="width:250px;" class="aline">{{item.dept_name}}</div>
                <div  style="flex:1; margin:0 20px;">
                    <div style="background:#00000014; width:100%; height:16px;">
                        <div style=" background:#1F6CEB; height:100%;" :style="{width:item.jd+'%'}">
                            <div style="color:#fff; font-size:12px; padding:0 10px;">{{item.jd}}%</div>
                        </div>
                    </div>
                    <!-- <a-progress :percent="0.6" color="#1F6CEB" track-color="#00000014" :stroke-width="14"/> -->
                </div>
                <div style="width:180px;">{{item.limit_weight}}/{{item.all_weight}}</div>
            </div>
            </a-scrollbar>
        </div>
            </a-spin>
    </div>
</template>
<script setup>
import { ref, reactive, onMounted } from 'vue';
    import syApi from "@/api/home/sy";
    import tool from '@/utils/tool'
import dpsImg from '@/assets/dps.png'
import pszImg from '@/assets/psz.png'
    const loading = ref(false)
    onMounted(() => {
        getPsrwList()
        
    })
    const psz = ref(0)
    const dps = ref(0)
    const getPsrwList = () => {
        loading.value = true
        syApi.getPsrwList().then((res) => {
            console.log(res)
            if (res.code == 200 && res.success) {
                psz.value = res.data.psz_weight
                dps.value = res.data.dps_weight
                let list = []
                res.data.peisong_list.forEach(e => {
                    let jd = 0
                    let yps = tool.js.accSub(e.all_weight,e.limit_weight)
                    jd = tool.js.accDiv(yps,e.all_weight)
                    jd = tool.js.accMul(jd,100)
                    e.jd = jd.toFixed(2)
                    list.push(e)
                })
                data.value = list.sort((a, b) => b.jd - a.jd);
                loading.value = false
            }else{
                console.log(e)
                loading.value = false
            }
        }).catch((e) => {
            console.log(e)
            loading.value = false
        })
    }
const data = ref([])
    

</script>
<style scoped lang="less">
.aline{
    white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.psrw_content_title{
    display:flex;
    align-items:center;
}
.psrw_content_item{
    display:flex;
    align-items:center;
    margin-top:20px;
}
.psrw_top{
    display:flex; 
    align-item:center;
    justify-content: space-between;
    margin:10px 0;
    .psrw_top_item{
        width:calc(50% - 20px);
        background-color:#FAFAFA;
        padding:10px 20px;
        border-radius:10px;
        display:flex;
        align-items:center;
        .psrw_top_item_right{
            margin-left: 10px;
        }
        .psrw_top_item_icon{
            // background: linear-gradient(155.47deg, #FFFFFF 9.19%, #BBCFEE 92.16%);
            width:50px;
            height:50px;
            border-radius: 15px;
            display:flex;
            align-items:center;
            justify-content: center;
        }
    }
}
</style>